Have fun! 新手也能打造的Javascript微型專案! Day6: 老是算錢算不清，寫個簡單的計算機用用吧！(上)

2022 iThome 鐵人賽

DAY 6

Modern Web

Have fun! 新手也能打造的Javascript微型專案系列第 6 篇

Have fun! 新手也能打造的Javascript微型專案! Day6: 老是算錢算不清，寫個簡單的計算機用用吧！(上)

14th鐵人賽 javascript side project

windate3411

團隊桌遊玩樂團

2022-09-19 16:25:57

1052 瀏覽

分享至

tags: `ItIron2022` `Javascript`

前言

從今天開始我們會進入一系列的vanilla javascript專案系列，也就是不透過前端框架或套件，單純利用HTML/CSS/Javascript打造的簡單專案，礙於篇幅的關係，其中許多專案我都會先將UI的部分處理好，在文章內我們就只探討javascript邏輯處理的部分！一開始前幾天會盡量從簡單一點的專案下手，會需要一點DOM操作的基礎，不用緊張，任何人都能跟上的！

預期成果

我們今天要做的是一個最基礎的計算機，預期的成果如下，樣式也相對簡單，我們這次就專注在邏輯的處理上，篇幅的關係我們今天就僅處理事前規劃的部分。

calculator demo

Getting started

Step1: 專案結構

首先請你先建立一個新的資料夾，裡面包含index.html, style.css & script.js檔案。

專案結構如下圖所示。

folder structure

html檔案請你寫入以下的內容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Calculator</title>
    <link rel="stylesheet" href="./style.css">
    <script src="./script.js" defer></script>
</head>
<body>
    <div class="calculator">
        <input class="display"></input>
        <div class="btn dark clear">C</div>
        <div class="btn dark sign">+/-</div>
        <div class="btn dark module">%</div>
        <div class="btn operator">/</div>
        <div class="btn number">7</div>
        <div class="btn number">8</div>
        <div class="btn number">9</div>
        <div class="btn operator">x</div>
        <div class="btn number">4</div>
        <div class="btn number">5</div>
        <div class="btn number">6</div>
        <div class="btn operator">-</div>
        <div class="btn number">1</div>
        <div class="btn number">2</div>
        <div class="btn number">3</div>
        <div class="btn operator">+</div>
        <div class="btn zero number">0</div>
        <div class="btn">.</div>
        <div class="btn equal">=</div>
      </div>
</body>
</html>

css檔案則請你寫入以下的內容，js的部份我們暫時先留空白沒關係。

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
}

.calculator {
  display: grid;
  width: 340px;
  margin: 0 auto;
  font-size: 40px;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(50px, auto);
  border: 0.3px solid #868383;
  border-radius: 3rem;
  padding: 0.8em;
  background-color: #222;
  gap: 10px;
}

.display {
  grid-column: 1/5;
  background-color: lightblue;
  text-align: right;
  padding-right: 20px;
  background-color: #d3d3d3;
  color: #333;
  margin-bottom: 10px;
  border-radius: 16px;
  outline: 0;
  font-size: 36px;
}

.btn {
  border: 1px solid black;
  background-color: #999;
  cursor: pointer;
  border-radius: 40px;
  color: #222;
  font-weight: bold;
  text-align: center;
  transition: background-color 0.2s ease-in;
}

.btn:hover {
  background-color: #868383;
}

.dark {
  background-color: #333;
  color: #ffffff;
}

.operator {
  background-color: #e08d1f;
}

.zero {
  grid-column: 1/3;
}

Step2: 事前規劃

老樣子，請養成動手前先好好思考過一次的習慣，我們今天要做計算功能的話，大致上會需要以下幾個元素。

之前的數字
運算符
現在的數字
一個監聽器去監聽所有的點擊行為

比方說我今天要做1 + 2 = 3，那麼1就是之前的數字，+則是運算符，2則是現在的數字，按下=之後則要將三者合一最終算出3這個結果。

另外有一點你需要注意，在你按下任何運算符之後，畫面上呈現的數字就是現在的數字，之前的數字必須要儲存起來並清空顯示的區塊，我們還需要一個額外的變數來儲存運算符是否點擊過，且運算符的值會是一個函數，因此需要再另一個變數去描述每個運算符對應的運算函數，最終我們需要以下六個元素。

之前的數字
運算符
現在的數字
一個監聽器去監聽所有的點擊行為
紀錄運算符是否點擊過的變數
一個對應運算符與運算函數的物件

理解這些後我們先完成初步的結構，請你將以下的內容寫進script.js內

const displayBar = document.querySelector(".display"); // 顯示結果的元素
const calculator = document.querySelector(".calculator"); // 計算機body

const operatorMapping = {
  "+": (a, b) => a + b,
  "-": (a, b) => a - b,
  "x": (a, b) => a * b,
  "/": (a, b) => a / b,
};

let operatorClicked = false;
let previousResult = "";
let operator;

function handleBtnClick (e) {
    // 暫時留空
}

// 建立監聽器
calculator.addEventListener("click", handleBtnClick);

總結

我們今天先完成了計算機的UI以及js檔案的基本結構處理，在這幾天專案我們節奏會放得稍微慢一些，各位可以放輕鬆一點！明天就會進入最後的功能實作，你也可以先想一下根據目前的結構你要怎麼實現四則運算的處理！

文章中的範例程式碼可以在這邊取得，歡迎自行取用

轉職Q & A

Danny,我終於把課都上完了! 現在要開始準備進入求職的階段，很多人跟我說履歷上不用放作品集也沒關係，這是真的嗎？

是，但也不是。我並不是在講幹話，但這種情況因人而異，不過假設你是第一次找工程師的工作且你並不是本科系出身，我強烈建議一定要放作品集，否則你沒有任何方式證明你的能力。

履歷上的作品集我個人認為跟學歷一樣，有一定的參考價值但主要還是一個敲門磚，當你有實際的相關工作經歷後是否要放我就覺得可有可無了，至於你要放什麼作品則跟你求職的方向有關係！一般來說如果是AC的學生我都會建議放一個協作專案、一個全端專案以及一個前/後端專案，我個人並不推薦你直接把課程內的作業當作主打的作品之一，因為這麼一來你的履歷同質性會非常高，你與相同課程出來的同學在履歷上幾乎一致，這麼一來要脫穎而出自然更為困難一些! 花一點時間打造一些獨立的作品對於你的求職會有較為正向的幫助，想要好一點的工作這種工夫我是建議不要省。

本文章同步發布於個人部落格，有興趣的朋友也可以來逛逛~!